<template>
	<view class="invitation-page">
		<view class="invitation-bg">
			<image src="http://static.kuaimayoupin.com/8985754041193519.png" mode="aspectFit"></image>
			</view>
			<view class="inner">
				<view class="invitation-box">
					<view class="invitation-box-top">
						<image src="../../static/images/linshi/login.png" mode="aspectFit"></image>
						<view class="app-name">嗑糖交友</view>
					</view>
					
					<view class="top">
						处对象 上嗑糖
					</view>
					
					<view class="top1">
						快来邀请好友一起脱单吧～
					</view>
					
					<view class="top2">
						<button class="invitation-btn" open-type="share" style="background: linear-gradient(180deg, #F7EF82 0%, #FBC03D 100%, #FCEB89 100%);border-radius: 20upx;color: #D32B44;">立即邀请</button>
					</view>
					
					<!-- <view class="invitation-box-bottom">
						<view class="invitation-li invitation-li-left">
							<view class="invitation-title">情侣</view>
							<view class="invitation-info">
								我们彼此心仪
								<br />
								赶快邀请我吧~
							</view>
							<button class="invitation-btn" open-type="share">邀请</button>
						</view>
						<view class="invitation-li invitation-li-right">
							<view class="invitation-title">好朋友</view>
							<view class="invitation-info">
								我们情同姐妹
								<br />
								赶快邀请我吧~
							</view>
							<view class="invitation-btn">邀请</view>
						</view>
					</view> -->
					
					
					<!-- 左侧 -->
					<image src="http://static.kuaimayoupin.com/6266945801397348.png" mode="aspectFit" class="left-silk"></image>
					<!-- 右侧 -->
					<image src="http://static.kuaimayoupin.com/2419069973717682.png" mode="aspectFit" class="right-silk"></image>
				</view>
				<!-- <u-upload action="http://47.94.169.143:8005/user/upload" @on-success="picsuccess"></u-upload> -->
				<view class="activity-rule">
					<view class="activity-rule-title">活动规则：</view>
					<view class="activity-rule-line">
						1.邀请好友
						<text>注册成功</text>
						，好友即可获得7天会员体验服务，老用户随机获得1-7天
						<text>免费会员服务</text>
						。
					</view>
					<view class="activity-rule-line">
						2.
						<text>每邀请一位</text>
						好友加入，您都将
						<text>有机会获得</text>
						1-7天会员体验服务。
					</view>
					<view class="activity-rule-line">
						3.每个好友只能邀请
						<text>一次</text>
					</view>
					<view class="activity-rule-line">
						4.邀请
						<text>情侣注册</text>
						后，双方自动成为
						<text>情侣关系</text>
						。
					</view>
				</view>
			</view>
			<view class="invite-record-title">
				<image src="http://static.kuaimayoupin.com/8096907601729504.png" mode=""></image>
				<view class="invite-record-text"><image src="http://static.kuaimayoupin.com/2502177996032269.png" mode=""></image></view>
				<image src="http://static.kuaimayoupin.com/1017205888632821.png" mode=""></image>
			</view>
			<view class="invite-record">
				<view class="invite-record-list" v-if="list.length != 0">
					<view class="invite-record-li" v-for="(item,index) in list" :key="index">
						<view class="invite-record-left">
							<view class="invite-phone">邀请新用户{{item.invite_no}}</view>
							<view class="invite-time">{{item.created_time | format}}</view>
						</view>
						 <!-- @click="toDetail(item)" -->
						<view class="invite-record-right">
							<view class="invite-look">看看TA</view>
							<view class="invite-number">+3</view>
						</view>
					</view>
					
					<!-- <view class="invite-record-li">
						<view class="invite-record-left">
							<view class="invite-phone">邀请新用户188****6789</view>
							<view class="invite-time">2020.02.25 14:26:56</view>
						</view>
						<view class="invite-record-right">
							<view class="invite-look">看看TA</view>
							<view class="invite-number">+3</view>
						</view>
					</view> -->

				
				</view>
				
				<view v-else class="jilu">
					暂无邀请记录
				</view>
				
			</view>
	</view>
</template>

<script>
import {inviteRecord,genCode} from '@/api/user/user.js'
export default {
	data() {
		return {
			list:[],
			invite_no:null,
			nick_name:null
		};
	},
	created() {
		inviteRecord().then(res=>{
			this.list = res.data
		})
		genCode().then(res=>{
			uni.setStorageSync('invite_no', res.data.invite_no);
			this.invite_no = res.data.invite_no
		})
		uni.getStorage({
				key: 'invite_no',
				success: res=> {
					this.invite_no = res.data
				}
		});
		uni.getStorage({
				key: 'userInfo',
				success:res=>  {
					this.nick_name = res.data.nick_name
				}
		});
	},
	onShareAppMessage(res) {
		console.log(this.invite_no);
		return {
			title: '听说这是最近超好玩超火爆的交友神器,快和我一起加入吧',
			path: '/pageA/inviteFriend/inviteFriend?invite_no='+this.invite_no,
			imageUrl : '../../static/fenxiangtu.png'
		};
	},
	methods: {
		
	}
};
</script>

<style lang="scss">
	.jilu{
		color: #FFFFFF;
		margin-top: 130upx;
		text-align: center;
	}
page {
	min-height: 100%;
}
.invitation-page {
	height: 100%;
	.inner {
		background: #c71f2e;
		position: relative;
	}
}
.invitation-bg {
	height: 588upx;
	image{
		display: block;
		width: 100%;
		height: 588upx;
	}
}
.invitation-box {
	.top2{
		margin-top: 30upx;
		padding-bottom: 20upx;
	}
	.top1{
		color: #FFFFFF;
		font-size: 30upx;
		margin-top: 10upx;
	}
	.top{
		color: #FEC347;
		font-size: 34upx;
		margin-top: 32upx;
	}
	background: #d32b44;
	padding:  40upx;
	box-sizing: border-box;
	box-shadow: 0px 6px 26px 0px rgba(120, 23, 50, 0.59);
	border-radius:12px;
	position: absolute;
	top: -140upx;
	left: 0;
	right: 0;
	margin: 0 30upx;
	.left-silk{position: absolute;left: -30upx;bottom: -30upx;display: block;width: 88upx;height: 172upx;}
	.right-silk{position: absolute;right: -30upx;top: 30upx;display: block;width:130upx;height: 116upx;}
	.invitation-box-top {
		display: flex;
		justify-content: flex-start;
		color: #fff;
		font-size: 40upx;
		line-height: 80upx;
		margin-bottom: 20upx;
		image {
			display: block;
			width: 84upx;
			height: 80upx;
			margin-right: 20upx;
		}
	}
	.invitation-box-bottom {
		display: flex;
		justify-content: space-between;
		position: relative;
		.invitation-li {
			color: #fff;
			font-size: 28upx;
			line-height: 36upx;
			width: 50%;
			box-sizing: border-box;
		}
		.invitation-li::after {
			content: '';
			display: block;
			width: 1px;
			height: 100upx;
			background: #F45369;
			position: absolute;
			left: 50%;
			top: 20%;
		}
		.invitation-li-right {
			padding-left: 60upx;
		}
		.invitation-title {
			color: #fec347;
			font-size: 36upx;
			line-height: 48upx;
			margin-bottom: 10upx;
		}
		.invitation-btn {
			width: 287upx;
			margin-left: 27upx;
			
		}
	}
}
.activity-rule {
	padding: 300upx 0 30upx;
	line-height: 56upx;
	color: #fff;
	font-size: 32upx;
	.activity-rule-title {
		color: rgba(254, 195, 71, 1);
	}
	text {
		color: rgba(254, 195, 71, 1);
	}
}
.invite-record-title {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 20upx;
	background: #c71f2e;
	.invite-record-text {
		margin: 0 20upx;
		image {
			display: block;
			width: 160upx;
			height: 56upx;
		}
	}
	image {
		display: block;
		width: 66upx;
		height: 66upx;
	}
}
.invite-record {
	background: #c71f2e url('http://static.kuaimayoupin.com/2234545216110202.png') no-repeat;
	padding: 80upx 30upx 30upx 30upx;
	background-size: 750upx 480upx;
	width: 750upx;
	height: 520upx;
	.invite-record-list {
		overflow-y: scroll;
		height: 340upx;
		.invite-record-li {
			display: flex;
			justify-content: space-between;
			padding: 0 40upx;
			color: #fff;
			margin-bottom: 40upx;
			.invite-record-left {
				width: 350upx;
				.invite-phone {
					font-size: 32upx;
				}
				.invite-time {
					font-size: 24upx;
				}
			}
			.invite-record-right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				width: 250upx;
				.invite-look {
					width: 120upx;
					line-height: 60upx;
					background: rgba(248, 226, 111, 1);
					border-radius: 2px;
					font-size: 28upx;
					color: rgba(211, 43, 68, 1);
				}
				.invite-number {
					width: 120upx;
					line-height: 60upx;
					border: 1px solid rgba(248, 226, 111, 1);
					border-radius: 2px;
					opacity: 0.6;
				}
			}
		}
	}
}
</style>
